import React, {useEffect, useState} from "react"
import {Divider, Modal, Pagination} from "antd";
import style from "./index.module.css"
import {get} from "../../utils/get";

const ReplyList =(props)=>{
    const [data,setData]=useState([])
    const [page,setPage]=useState(1)
    const [total,setTotal] = useState(0);
    useEffect( ()=>{
       get(`/share/comments/${props.commentId}/reply?page=${page}&limit=7`).then(res=>{
            if(res.data.code===0)
            {
                setData(res.data.page.list)
                setTotal(res.data.page.totalCount)
            }
        })
    },[page,props.show])
    return(
        <Modal
            bodyStyle={{height: '500px', overflowY: 'auto',borderRadius: '20px'}}
            centered
            closable={false}
            visible={props.show}
            onOk={()=>props.changeShow(false)}
            onCancel={()=>props.changeShow(false)}
            footer={<Pagination
                pageSize={7}
                onChange={(page)=>{
                    setPage(page)
                }}
                total={total} />}
                width={600}
        >
        <span className={style.replyHeader}>共{total}条回复</span>
            {
                data.map(item=>{
                    return(
                        <div className={style.replyItem} key={item.commentId}>
                            <div className={style.replyContent}>
                                <span>{item.nickname}:</span><span>{item.content}</span>
                            </div>
                            <div className={style.replyTime}>
                                {item.createTime}
                            </div>
                            {/* <Divider></Divider> */}
                        </div>
                    )
                })
            }

        </Modal>
    )
}
export default ReplyList;
